<template>
  <div class="detail ace">
    <div v-if="!preview">
      <Header_h class="Header_h" v-if="pc == 1"></Header_h>
      <Header class="Header" v-else />
    </div>
    <NavItem v-if="value1" class="NavItem" :class="two ? 'NavItemNew' : ''" />
    <div class="Breadcrumbs" :class="[preview ? 'Breadcrumbs_top' : '', value1 ? '' : 'two']">
      <div style="display: flex;align-items: center;">
        <!-- <Breadcrumb /> -->
        <el-button v-if="!preview" size="mini" class="pubBtn3" style="margin-right: 20px" type="button"
          @click="$router.push(`${url}`)">
          <router-link :to="{ path: `${url}` }">返回</router-link>
        </el-button>
        <el-breadcrumb separator="-">
          <el-breadcrumb-item v-if="path == '/patentDetails'" :to="{ path: `/patent` }">我的专利管理</el-breadcrumb-item>
          <el-breadcrumb-item v-if="path == '/compdetail'" :to="{ path: `/competitor` }">监控竞争对手</el-breadcrumb-item>
          <el-breadcrumb-item v-if="path == '/cutDetails'" :to="{ path: `/cutting` }">产学情报研</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `${url}` }">专利列表</el-breadcrumb-item>
          <!-- <el-breadcrumb-item :to='{path:`${url}`}'>{{name}}</el-breadcrumb-item> -->
          <el-breadcrumb-item>专利详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-button v-if="preview" size="mini" class="pubBtn3" style="margin-left: 20px" type="button"
          @click="$router.push(`/`)">
          <router-link :to="{ path: `/` }">返回</router-link>
        </el-button>
      </div>
      <div>
        <el-switch v-model="value1" active-text="单屏" inactive-text="双屏">
        </el-switch>
      </div>
    </div>
    <el-main class="main-top asdsa" :class="value1 ? '' : 'two'">
      <div v-show="value1">
        <el-row type="flex" justify="space-between" class="title_pns">
          <el-col :xl="24" class="tio" v-if="data">
            <span class="v_span">{{ data.pns }}</span>
            <p class="v_span2">{{ data.tio }}</p>
          </el-col>
          <el-col :push="2" class="icon-tog mb" :xs="10">
            <i @click="show = true" class="iconfont icon-toggle"></i>
          </el-col>
          <el-col class="d_btn pc" style="text-align: right">
            <el-button @click="copy" :data-clipboard-text="record" id="express_info_right" icon="iconfont icon-fenxiang">
              分享该专利
            </el-button>
            <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()">下载专利文件</el-button>
          </el-col>
        </el-row>
        <el-tabs style="margin-top: 20px" v-model="activeIndex" @tab-click="handleClick">
          <el-tab-pane label="法律状态">
            <el-table :header-cell-style="{ background: '#F3F8FE' }" :data="data.law_infos" border class="tabbleWidth">
              <el-table-column width="150" prop="time" label="日期"> </el-table-column>
              <el-table-column width="280" prop="status" label="法律状态">
              </el-table-column>
              <el-table-column width="280" prop="info" label="法律状态信息">
                <!-- <template slot-scope="scope">
                <span>{{scope.row.law_infos.time}}</span>
                <span>{{scope.row.law_infos.status}}</span>
                <span>{{scope.row.law_infos.info}}</span>
              </template> -->
              </el-table-column>
              <el-table-column prop="desc" label="附加信息">
                <template slot-scope="scope">
                  <!-- <div>{{ scope.row.desc | splitBySpaceAndNewLine }}</div> -->
                  <div v-for="item in (scope.row.desc)">{{ item }}</div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="费用信息">
            <el-button v-if="!pay" class="infos mBton" type="primary" @click="open">查看费用信息</el-button>

            <p v-if="data.cost_type == '1' && pay" class="infos">应缴费信息</p>
            <el-table v-if="data.cost_type == '1' && pay" :data="pay.FeeShouldPay" border style="width: 38%">
              <!--  <el-table-column
                prop="applicationNumber"
                label="专利号"
                width="180">
              </el-table-column> -->
              <el-table-column prop="feeName" label="费用种类" width="180">
              </el-table-column>
              <el-table-column prop="shouldPayPayment" label="应缴金额" width="180">
              </el-table-column>
              <el-table-column prop="shouldPayDate" label="缴费截止日"> </el-table-column>
              <!--   <el-table-column
                 prop="shouldPayDate"
                 label="费用状态">
               </el-table-column> -->
            </el-table>
            <p v-if="data.cost_type == '1' && pay" class="infos">已缴费信息</p>
            <el-table v-if="data.cost_type == '1' && pay" :data="pay.FeeOriginal" border class="tabbleWidth">
              <!--  <el-table-column
                prop="applicationNumber"
                label="专利号"
                width="180">
              </el-table-column> -->
              <el-table-column prop="feeName" label="费用种类" width="180">
              </el-table-column>
              <el-table-column prop="paymentAmount" label="已缴金额" width="180">
              </el-table-column>
              <el-table-column prop="paymentDate" label="缴费日期"> </el-table-column>
              <el-table-column prop="payerName" label="缴费人姓名"> </el-table-column>
              <el-table-column prop="receiptNumber" label="收据号"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="复审无效">
            <div v-if="review" class="tab_box">
              <div class="tab_item">
                <!-- <div class="left_title">委内编号</div>
              <div class="content">暂无数据</div> -->
                <div class="left_title">主审员</div>
                <div class="content">{{ review.rimec }}</div>
                <div class="left_title">决定号</div>
                <div class="content">{{ review.ridn }}</div>
              </div>
              <div class="tab_item">
                <div class="left_title">参审员</div>
                <div class="content">{{ review.riaec }}</div>
                <div class="left_title">合议组组长</div>
                <div class="content">{{ review.rilec }}</div>
              </div>
              <div class="tab_item">
                <div class="left_title">决定日</div>
                <div class="content">{{ review.ridd }}</div>
                <div class="left_title">请求人</div>
                <div class="content">{{ review.claimer }}</div>
              </div>
              <!-- <div class="tab_item">
                <div class="left_title">法律依据</div>
                <div class="content">暂无数据</div>
            </div> -->
              <div class="tab_item">
                <div class="left_title">案由</div>
                <div class="content anyou" v-html="review.html"></div>
              </div>
            </div>
            <div class="infos mBton" v-else>暂无数据</div>
          </el-tab-pane>
          <el-tab-pane label="许可信息">
            <el-table v-if="permit" class="tabbleWidth" :header-cell-style="{ background: '#F3F8FE' }" :data="permit"
              border>
              <el-table-column prop="apc" label="许可人"> </el-table-column>
              <el-table-column prop="trpc" label="被许可人"> </el-table-column>
              <!--                <el-table-column
                              width="280"
                              prop="info"
                              label="合同类型">
                            </el-table-column>
                            <el-table-column
                              prop="desc"
                              label="许可类型 ">
                            </el-table-column>
                            <el-table-column
                              prop="desc"
                              label="生效日 ">
                            </el-table-column> -->
            </el-table>
            <div class="infos mBton" v-else>暂无数据</div>
          </el-tab-pane>
          <el-tab-pane label="专利质押">
            <el-table v-if="patent" :header-cell-style="{ background: '#F3F8FE' }" :data="patent" border
              class="tabbleWidth">
              <el-table-column width="200" prop="time" label="登记生效日">
              </el-table-column>
              <el-table-column width="280" prop="time" label="登记号"> </el-table-column>
              <el-table-column prop="ppoc" label="质押人 "> </el-table-column>
              <el-table-column prop="pppc" label="质权人 "> </el-table-column>
              <el-table-column width="280" prop="status" label="备案阶段">
              </el-table-column>
            </el-table>
            <div v-else class="infos mBton">暂无数据</div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div v-show="!value1">
        <div class="two_box">
          <iframe :src="href" width="910" height="870"></iframe>
          <div style="background-color: #999;width: 5px;"></div>
          <iframe :src="href" width="910" height="870"></iframe>
        </div>
      </div>
      <!-- <p class="infos">法律发文信息</p> -->
    </el-main>
    <Service class="service" v-if="this.$route.meta.serve && type != 1" />
    <div v-show="show" class="transition-box mb">
      <transition name="el-fade-in">
        <div v-show="show" class="el-zoom-in-top">
          <p @click="show = false" class="close">
            <i class="iconfont icon-guanbi"></i>
          </p>
          <ul class="mb_nav_li">
            <li @click="show = false">
              <router-link to="/detail">摘要</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/power">权利要求</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/instructions">说明书</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/drawings">附图</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/fullText">全文</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/kindred">同族信息</router-link>
            </li>
            <li @click="show = false">
              <router-link to="/law">法律信息</router-link>
            </li>
          </ul>
          <el-row class="mt_btn" style="margin: 0 10px">
            <el-button @click="copy" id="express_info_right" :data-clipboard-text="record" type="warning">分享该专利
            </el-button>
            <el-button icon="iconfont icon-lanmuyeicon_pdfxiazai" @click="dow()" type="primary">下载专利文件</el-button>
          </el-row>
        </div>
      </transition>
    </div>
    <!-- <rightMenu @moveTo="moveTo" /> -->
    <QRCode v-if="QRCodeVisible" :text="record" :desc="data" :dialogVisible="QRCodeVisible" @val="val" />
  </div>
</template>

<script>
import { catalog_handle, download } from "@/api/configApi";
import { detail } from "@/api";
import Header from "@/components/Header";
import Header_h from "@/components/Header_h";
import Breadcrumb from "@/components/Breadcrumb";
import NavItem from "@/components/Navitem";
import rightMenu from "@/components/web/rightMenu";
import QRCode from "@/components/QRCode";
import { setShare } from "@/wechat";
import { VUE_APP_BASE_API, PAGE_BASE_URL } from "@/config";
import Service from "@/components/Service";
import "element-ui/lib/theme-chalk/base.css";

export default {
  components: {
    Header_h,
    Header,
    Breadcrumb,
    NavItem,
    Service,

    QRCode,
    rightMenu,
  },
  //过滤器
  filters: {
    splitBySpaceAndNewLine(value) {
      if (!value) return "";
      console.log(value.split(/\s+|\n+/));
      return value.split(/\s+|\n+/);
    },
  },
  data() {
    return {
      QRCodeVisible: false,
      data: [],
      isShow: false,
      url: "",
      name: "",
      pay: [],
      activeIndex: 0,
      patent: [],
      permit: [],
      review: [],
      preview: false,
      path: "",
      show: false,
      record: "",
      type: sessionStorage.getItem("type"),
      pc: sessionStorage.getItem("pc"),
      value1: true,
      two: 0,
      href: ''
    };
  },
  computed: {
    tabName() {
      return this.$route.query.tab || "law";
    },
  },
  async activated() {
    this.two = this.$route.query.two ? Number(this.$route.query.two) : 0

    let initTabIndex = "0";
    switch (this.tabName) {
      case "law":
        initTabIndex = "0";
        break;
      case "cost":
        initTabIndex = "1";
        break;
      case "review":
        initTabIndex = "2";
        break;
      case "permit":
        initTabIndex = "3";
        break;
      case "patent":
        initTabIndex = "4";
        break;
      default:
        break;
    }
    this.activeIndex = initTabIndex;

    try {
      this.url = sessionStorage.getItem("url");
      this.name = sessionStorage.getItem("name");
      const pid = sessionStorage.getItem("pid");

      let pc;
      if (this.$store.getters.token) {
        pc = 0;
      } else {
        pc = 1;
      }
      if (Number(this.$route.query.preview)) {
        this.preview = true;
      }
      this.record =
        window.location.origin +
        "#/detail?pid=" +
        (this.pid ? this.pid : sessionStorage.getItem("pid")) +
        "&preview=1";
      let data = await catalog_handle({ pid: pid, type: 7 });
      this.data = data.list;

      this.data.law_infos.forEach((item) => {
        item.desc = item.desc.split(/\s+|\n+/);
      });

      this.path = sessionStorage.getItem("path");
      this.pay = this.data.law;

      const desc = `知识产权智慧管理平台`;
      const title = `[顺企中心]${this.data.tio}-${this.data.ano}`;
      setTimeout(() => {
        setShare({
          title, // 分享标题
          desc,
        });
      }, 1000);

      let data1;
      if (this.activeIndex == 4) {
        data1 = await catalog_handle({
          type: 9,
          pid: pid,
        });
        const res = data1.list;
        this.patent = res.list;
      } else if (this.activeIndex == 3) {
        data1 = await catalog_handle({
          type: 10,
          pid: pid,
        });
        const permit = data1.list;
        this.permit = permit.list;
      } else if (this.activeIndex == 2) {
        data1 = await catalog_handle({
          type: 11,
          pid: pid,
        });
        this.review = data1.list;
      }

      const url = window.location.origin;
      const href = url + `/#/detailNew2?pid=${pid}&preview=${this.preview}&two=1`
      this.href = href;
    } catch (e) {
      this.$message.error(e.message);
    }
  },
  mounted() {
  },
  methods: {
    moveTo() {
      window.scrollTo(0, 0);
    },
    val(val) {
      this.QRCodeVisible = val;
    },
    contactus(val) {
      this.dialogVisible = val;
    },
    async open() {
      try {
        this.url = sessionStorage.getItem("url");
        this.name = sessionStorage.getItem("name");
        const pid = sessionStorage.getItem("pid");
        let data = await catalog_handle({ pid: pid, type: 8 });
        this.pay = data.list;
        this.$alert(this.pay.msg, {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "我已知道",
          center: true,
          lockScroll: true,
        }).then(() => {
          // this.isShow = true
        });
      } catch (e) {
        // this.$message.error(e.message)
      }
    },
    async dow() {
      try {
        const pid = sessionStorage.getItem("pid");
        download({
          pid: pid,
        }).then((res) => {
          if (res.list[0].nginxPath == "The result is empty") {
            this.$message({
              message: "专利文件为空",
              type: "warning",
            });
          } else {
            window.open("https://" + res.list[0].nginxPath, "_blank");
          }
        });
      } catch (e) {
        this.$message(e.message);
      }
    },
    async handleClick(tab) {
      try {
        let data;
        if (tab.index == 4) {
          data = await catalog_handle({
            type: 9,
            pid: sessionStorage.getItem("pid"),
          });
          const patent = data.list;
          this.patent = patent.list;
        } else if (tab.index == 3) {
          data = await catalog_handle({
            type: 10,
            pid: sessionStorage.getItem("pid"),
          });
          const permit = data.list;
          this.permit = permit.list;
        } else if (tab.index == 2) {
          data = await catalog_handle({
            type: 11,
            pid: sessionStorage.getItem("pid"),
          });
          this.review = data.list;
        }
      } catch (e) {
        // this.$message.error(e.message)
      }

      let name = "law";
      switch (tab.index) {
        case "0":
          name = "law";
          break;
        case "1":
          name = "cost";
          break;
        case "2":
          name = "review";
          break;
        case "3":
          name = "permit";
          break;
        case "4":
          name = "patent";
          break;
        default:
          break;
      }
      this.$router.replace({ name: "connection-list", query: { tab: name, preview: 1 } });
    },
    copy() {
      this.show = false;
      let clipboard = new this.clipboard("#express_info_right");
      let that = this;
      clipboard.on("success", function () {
        that.QRCodeVisible = true;
        clipboard.destroy();
      });
      clipboard.on("error", function () {
        that.$message.error("复制失败");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main-top {
  margin-top: 0;
}

.Breadcrumbs_top {
  margin-top: 0;
}

.navitems {
  top: 0 !important;
}

.detail_large {
  margin-bottom: 44px;
}

.CN {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
  display: inline-block;
}

.title {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: inline-block;
  margin-left: 20px;
}

.detail_info {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
}

.detail_info_title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  margin: 20px 0;
}

.detail_info_last {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  margin: 20px 64px;
}

.img-box {
  width: 188px;
  // height:237px;
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  text-align: center;

  .img {
    width: 133px;
    height: 193px;
    object-fit: cover;
    margin: 10px 0;
  }
}

.detail_info_first_box {
  display: flex;
  align-items: center;
  // margin-bottom: 60px;
}

.tips {
  font-size: 14px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  display: block;
  margin: 10px 0;
}

.detail_head_title {
  width: 143px;
}

.detail_info_patent {
  // height:50px;
  // margin:0 0 22px 0;
  margin-bottom: 20px;
  margin-left: 64px;
  width: 480px;
}

.detail_head_context {
  width: 143px;
  margin-bottom: 20px;
}

.v_span {
  font-size: 18px;
  font-weight: 400;
  color: rgba(42, 139, 45, 1);
}

.v_span2 {
  font-size: 18px;
  font-weight: 400;
  color: rgba(31, 46, 76, 1);
  padding-left: 20px;
}

.infos {
  margin: 40px 0 20px 0;
}

.mBton {
  display: block;
  margin: 200px auto 20px;
  text-align: center;
}

.tab_box {
  text-align: center;
}

.tab_item {
  display: flex;

  .left_title {
    width: 151px;
    // height:60px;
    // line-height:60px;
    padding: 20px 0;
    display: block;
    background: #f7f9fc;
    border: 1px solid #e6e9f0;
    font-size: 14px;
    font-weight: 400;
    color: #1f2e4d;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 425px;
    // height: 60px;
    // line-height:60px;
    background: #ffffff;
    border: 1px solid #e6e9f0;
    font-size: 14px;
    font-weight: 400;
    color: #1f2e4d;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .anyou {
    width: 1001px;
    padding: 30px;
    overflow: hidden;

    /deep/ div,
    p {
      width: 100%;
      margin: 10px 0;
    }
  }
}

.pc {
  display: block;
}

.mb {
  display: none;
}

.tabbleWidth {
  width: 70%;
}

.two {
  width: 100% !important;
  margin-left: 0 !important;
  padding-bottom: 0;

  .two_box {
    display: flex;
    gap: 20px !important;

  }
}

.Breadcrumbs {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
}


.NavItemNew {
  position: absolute;
  width: 160px;
}

@media (max-width: 750px) {

  .Breadcrumbs,
  .NavItem,
  .Header,
  .service {
    display: none;
  }

  .tabbleWidth {
    width: 100%;
    margin-top: 20px;
  }

  .main-top {
    width: 100%;
    margin-left: 0 !important;
    padding-bottom: 0;
    top: 0;
  }

  .pc {
    display: none;
  }

  .mb {
    display: block;
  }

  .detail_info_title {
    margin: 15px 0;
  }

  .detail_info_last {
    margin: 15px 0;
  }

  .infos {
    margin: 10px 0 0 0;
  }

  .detail_info {
    margin-bottom: 30px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    width: 100%;
  }

  .detail_info_first_box {
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
  }

  .detail_head_title {
    width: auto;
  }

  .img-box {
    width: 100%;
  }

  .abst__layout-row {
    flex-direction: column;
  }

  .mb_top {
    margin-top: 20px;
  }

  .mb_context {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .v_span2 {
    padding-left: 0;
  }

  .tio {
    line-height: 1.3;
  }

  .icon-tog {
    text-align: center;
    display: inline-block;
    line-height: 46px;
  }

  .icon-toggle {
    font-size: 25px !important;
  }

  .title_pns {
    border-bottom: 1px solid #c8d0dc;
    padding-bottom: 10px;
  }

  .transition-box {
    position: fixed;
    right: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .el-zoom-in-top {
    position: fixed;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    top: 0;
    right: 0;
    z-index: 10;
  }

  .mb_nav_li {
    margin: 60px auto 0;
  }

  .mb_nav_li li {
    // margin-top:20px;
    padding: 20px 15px;
    border-bottom: 1px solid #ddd;
  }

  .close {
    float: right;
    // padding: 10px;
    margin-top: 25px;
    margin-right: 25px;

    .iconfont {
      font-size: 22px;
    }
  }

  .mt_btn {
    margin-top: 30px !important;
  }

  .tab_item {
    display: block;

    .left_title {
      width: 100%;
      // height:60px;
      // line-height:60px;
      padding: 20px 0;
      display: block;
      background: #f7f9fc;
      border: 1px solid #e6e9f0;
      font-size: 14px;
      font-weight: 400;
      color: #1f2e4d;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .content {
      width: 100%;
      // height: 60px;
      // line-height:60px;
      background: #ffffff;
      border: 1px solid #e6e9f0;
      font-size: 14px;
      font-weight: 400;
      color: #1f2e4d;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 0;
    }

    .anyou {
      width: 100%;
      padding: 30px;
      overflow: hidden;

      /deep/ div,
      p {
        width: 100%;
        margin: 10px 0;
      }
    }
  }
}
</style>
